<template>
	<view>
		
		
		<!-- 	这是视图的页面
		<view class="container">
			<view class="sub"><text>这是第一个块</text></view>
			<view class="sub"><text>这是第二个块</text></view>
			
		</view> -->

		<!-- 顶部区域 -->
		<view class="smart-page-head">
			<view class="smart-page-head-title">view</view>

		</view>
		
		

		<!-- 主题区域 -->
		<view class="smart-padding-wrap">
			<view>flex-direction:row横向布局</view>
		</view>
		
		<view class="smart-flex smart-row">
			<view class="flex-item smart-bg-blue">A</view>
			<view class="flex-item smart-bg-green">B</view>
			<view class="flex-item smart-bg-red">C</view>
		</view>
		
		
		<view>flex-direction:column横向布局</view>
		<view class="smart-flex smart-column">
			<view class="flex-item-100 smart-bg-blue">A</view>
			<view class="flex-item-100 smart-bg-green">B</view>
			<view class="flex-item-100 smart-bg-red">C</view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	/* 	.container{
		display: flex;
		flex-direction: row;
	}
	
	
	.sub{
		height: 50px;
		width: 30%;
		background-color: aquamarine;
		margin: 5px;
	} */
	
	
	/* 顶部区域样式 */
	.smart-page-head {
		padding: 35px;
		text-align: center;
	}

	.smart-page-head-title {
		font-size: 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		color: bebebe;
		border-bottom: 2rpx solid #dBdBdB;
		padding: 0 40rpx;
		box-sizing: border-box;
		display: inline-block;
	}
	
	
	/* 横向布局 */
	.smart-padding-wrap{
		padding: 0 30rpx;
	}
	.smart-flex{
		display: flex;
	}
	.smart-row{
		flex-direction: row;
	}
	.flex-item{
		width: 33.3%;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
	}
	.smart-bg-red{
		background-color: red;
	}
	.smart-bg-blue{
		background-color: blue;
	}
	.smart-bg-green{
		background-color: green;
	}
	
	/* 纵向布局 */
	.smart-column{
		flex-direction: column;
	}
	.flex-item-100{
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		text-align: center;
	}
	
	
	
	
	
	
</style>